<template>
    <div v-if="videoDataInfo != null">
        <div class="user" v-if="videoDataInfo != null">
            <div class="userinfo">
                <img v-lazy="videoDataInfo.users.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${videoDataInfo.users.avatar}`"  class="avatar">
                <span>{{videoDataInfo.users.userName}}</span>
            </div>
            <div @click="submitGuanZhu(videoDataInfo.users.email)" class="guanzhu">
                {{guanzhuFlag ? '已关注' : '关注'}}
            </div>
        </div>
        <video controls :src="`http://47.105.157.158:3000/video/${videoDataInfo.cat}/${videoDataInfo.paths}`"></video>
 
        <div class="video-cz">
            <i @click="submitDianzan(videoDataInfo._id)" class="iconfont dianzan">&#xe8c3;
                <span>{{videoDataInfo.dianzan}}</span>
            </i>
            <i @click="submitShoucang" class="el-icon-star-off fenxiang"></i>
        </div>

        <div class="banner">
            <img src="../assets/img/1e9da84b53ea4898ba859175609ac6bd.jpeg" alt="">
        </div>

        <div class="video-tab">
            <div @click="setCurrentTab(1)" :class="currentTab == 1 ? 'bd-bottom': ''">您可能喜欢</div>
            <div @click="setCurrentTab(2)" :class="currentTab == 2 ? 'bd-bottom': ''">评论<span>{{videoDataInfo.comments.length}}</span></div>
        </div>


        <div class="tab-video-content" v-if="currentTab === 1 && selectData != null">
            <div @click="priveseJump(item)" :key="index" v-for="(item, index) in selectData" class="content-item">
                <div class="video-img">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${item.imgs}`">
                </div>
                <div class="video-title">{{item.names}}</div>
            </div>
        </div>


        <div class="tab-comment-content" v-if="currentTab === 2">
            <div class="tab-form">
                <div class="form-avatar"><img src="../assets/img/1e9da84b53ea4898ba859175609ac6bd.jpeg" alt=""></div>
                <input @click="showDialogVisible" placeholder="点击输入您的评论" type="text">
            </div>

            <div :key="index" v-for="(item, index) in videoDataInfo.comments" class="comment-list">
                <div  class="list-item">
                    <div class="item-avatar"><img v-lazy="item.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.user.avatar}`"></div>
                    <span>{{item.user.userName}}</span> 
                </div>
                <div class="item-text">{{item.text}}</div>
            </div>

        </div>







        <!-- 评论输入框 -->
        <el-dialog @close="closeDialogVisible" :visible="dialogVisible" width="80%">
        <textarea placeholder="请输入您的评论内容..." v-model="commentText" class="input-text"></textarea>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitComment(videoDataInfo._id)">评 论</el-button>
        </span>
</el-dialog>
    </div>
</template>

<script>
import { onMounted, ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            videoDataInfo.value = context.parent.$store.state.videoData;
            getSelectData();
            getPriveseUser();
        })

        // 视频详情数据
        const videoDataInfo = ref(null);


        // 推荐数据
        const selectData = ref(null);
        // 根据详情数据获取推荐
        const getSelectData = async function () {
            let { data: res } = await axios.get(`/video/video/data/${context.parent.$store.state.videoData.cat}`);
            if (res.status != 200)
                return context.parent.$message.error('获取推荐数据失败，请后退重试');
            selectData.value = res.data;
        }

        // tab栏索引
        const currentTab = ref(1);
        // 切换tab
        const setCurrentTab = function (index) {
            currentTab.value = index;
        }

        // 评论对话框Flag
        const dialogVisible = ref(false);
        // 显示评论对话框
        const showDialogVisible = function () {
            dialogVisible.value = true;
        }
        // 隐藏评论对话框
        const closeDialogVisible = function () {
            dialogVisible.value = false;
            commentText.value = ''
        }

        // 你可能喜欢
        const priveseJump = function (item) {
            context.parent.$store.commit('setVideoData', item);
            videoDataInfo.value = item;
            context.parent.$message.success('切换视频成功');
            window.scrollTo(0,0);
        }

        // 点赞
        const submitDianzan = async function (id) {
            let { data: res } = await axios.post(`/video/video/dianzan/${id}`);
            if (res.status != 200)
                return context.parent.$message.error('点赞失败，请重新打开视频后重试');
            videoDataInfo.value.dianzan = res.newVideo.dianzan;
            context.parent.$message.success('点赞成功，请节制哟~');
        }
        // 评论内容
        const commentText = ref('');

        // 提交评论
        const submitComment = async function (id) {
            // 判断有没有在登录
            if (!window.localStorage.getItem('token')) 
                return context.parent.$message.error('请登录后再评论');

            if (commentText.value.trim().length === 0)
                return context.parent.$message.error('评论内容不能为空');

            let response = {
                text: commentText.value,
                user: priveseUser.value,
                videoID: id
            }
            let { data: res } = await axios.post('/video/comment', response);

            if (res.status != 200)
                return context.parent.$message.error('遇到未知错误，请重新登录后重试');
            videoDataInfo.value.comments = res.newVideo.comments;
            context.parent.$message.success('发表评论成功');
            commentText.value = '';
            dialogVisible.value = false;
        }

        // 预览者
        const priveseUser = ref(null);
        // 关注FLAG
        const guanzhuFlag = ref(false);

        // 获取预览者信息
        const getPriveseUser = async function () {
            if (window.localStorage.getItem('token')) {
                // 获取用户信息
                let { data: user } = await axios.get(`/user/login/${window.localStorage.getItem('token')}`);
                if (user.status != 200)
                    return context.parent.$message.error('登录异常，请重新登录后再尝试');
                priveseUser.value = user.user;
                context.parent.$nextTick(() => {
                    guanzhuFlag.value = priveseUser.value.guanzhu.includes(videoDataInfo.value.users.email);
                })
            }
        }

        // 关注
        const submitGuanZhu = async function (id) {
            // 判断有没登录
            if (!window.localStorage.getItem('token'))
                return context.parent.$message.error('请先登录后，再关注');

            // 提交关注
            let { data: res } = await axios.post(`/set/guanzhu/${id}/${priveseUser.value.email}`);
            if (res.status != 200)
                return context.parent.$message.error('关注失败，请尝试重新登录');
            guanzhuFlag.value = res.op;
            context.parent.$message.success(res.msg);
        }

        // 收藏
        const submitShoucang = function () {
            context.parent.$message.error('该功能尚未开发，目前只支持PC端图片收藏');
        }

        const methods = { 
            setCurrentTab, 
            showDialogVisible,
            closeDialogVisible, 
            priveseJump,
            submitDianzan,
            submitComment,
            submitGuanZhu,
            submitShoucang
        }

        return {
            ...methods,
            currentTab,
            dialogVisible,
            commentText,
            videoDataInfo,
            selectData,
            guanzhuFlag

            
        }
    }
}
</script>

<style lang="less" scoped>
.user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.933333rem;
    padding: .266667rem;
    background-color: #fff;
    .avatar {
        width: 2.133333rem;
        height: 2.133333rem;
        border-radius: 50%;
        vertical-align: middle;
    }
    span {
        font-size: .8rem;
        color: #3b3b3b;
        font-weight: 700;
        margin-left: .4rem;
    }
    .guanzhu {
        width: 3.466667rem;
        height: 1.6rem;
        text-align: center;
        line-height: 1.6rem;
        font-size: .8rem;
        border-radius: .266667rem;
        background: #30a1fa;
        color: #fff;
        font-weight: 700;
    }
}

.video-cz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.666667rem;
    border-bottom: .106667rem solid #f3f3f3;
    padding: 0 .4rem;
    .dianzan,
    .fenxiang {
        width: 4rem;
        height: 1.6rem;
        line-height: 1.6rem;
        text-align: center;
        border-radius: .16rem;
        border: .053333rem solid #d9d9d9;
        font-size: .666667rem;
    }
    .fenxiang {
        width: 2.666667rem!important;
    }
}

.banner {
    height: 4rem;
    margin-top: .4rem;
    img {
        height: 100%;
    }
}

.bd-bottom {
    border-bottom: .133333rem solid #262626;
    color: #000!important;
}

.video-tab {
    padding-left: .533333rem;
    margin-top: 1.066667rem;
    div {
        display: inline-block;
        padding-bottom: .266667rem;
        margin-right: .666667rem;
        font-size: .666667rem;
        color: #8c8c8c;
        span {
            margin-left: .266667rem;
        }
    }


}

.tab-video-content,
.tab-comment-content {
    margin-top: .8rem;
}

.content-item {
    display: flex;
    padding: 0 .533333rem;
    margin: .266667rem 0;
    div {
        flex: 1;
    }
    .video-title {
        font-size: .88rem;
        padding: .266667rem;
    }
    img {
        height: 100%;
    }
}

.tab-form {
    display: flex;
    height: 1.6rem;
    padding: 0 .533333rem;
    .form-avatar {
        width: 1.6rem;
        height: 100%;
        text-align: center;
        img {
            height: 100%;
            border-radius: 50%;
        }
    }
    input {
        flex: 1;
        border-radius: .266667rem;
        border: .026667rem solid #d9d9d9;
        box-sizing: border-box;
        padding: 0 .533333rem;
        outline: none;
        margin: 0 .533333rem;
        font-size: .666667rem;
        &:focus {
            border-color: #44a4fa;
        }
    }
}

.list-item {
    display: flex;
    align-items: center;
    .item-avatar {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: .533333rem;
        img {
            height: 100%;
            border-radius: 50%;
        }
        
    }
    span {
        font-size: .666667rem;
        font-weight: 700;
        color: #262626;
    }
}

.item-text {
    font-size: .666667rem;
    padding-left: 2.066667rem;
}


.comment-list {
    margin-top: 1.066667rem;
    padding: 0 .533333rem; 
}

.input-text {
    width: 100%;
    height: 6.666667rem;
    outline: none;
    resize: none;
    color: #757575;
    box-sizing: border-box;
    padding: .533333rem;
    font-size: .666667rem;
}
</style>